<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>VueComponent</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!--
            关于 VueComponent
                a. school 组件本质是一个名为 `VueComponent的构造函数` ，且不是程序员定义的，而是 Vue.extend() 生成的

                b. 我们只需要写 <school/> 或 <school></school>， Vue 解析时会帮我们创建 school 组件的实例对象 ，即 `Vue` 帮我们执行的 new VueComponent(options)

                c. 每次调用 Vue.extend ，返回的都是一个全新的 VueComponent ，即不同组件是不同的对象

                d. 关于 this 指向
                    ⅰ. 组件配置中 `data` 函数、 `methods` 中的函数、 `watch` 中的函数、 `computed` 中的函数 它们的 `this` 均是 `VueComponent` 实例对象
                    ⅱ. `new Vue(options)` 配置中：`data` 函数、 `methods` 中的函数、 `watch` 中的函数、 `computed` 中的函数 它们的 `this` 均是 `Vue` 实例对象

                e. VueComponent 的实例对象，以后简称 `vc` （组件实例对象） `Vue` 的实例对象，以后简称 `vm`

         -->
        <div id="root">
            <school></school>
            <hello></hello>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        // 定义school组件
        const school = Vue.extend({
            name: 'school',
            template: `
                <div>
                    <h2>学校名称：{{name}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
                `,
            data() {
                return {
                    name: '尚硅谷',
                    address: '北京',
                };
            },
            methods: {
                showName() {
                    console.log('showName', this);
                },
            },
        });

        const test = Vue.extend({
            template: `<span>atguigu</span>`,
        });

        const hello = Vue.extend({
            template: `
            <div>
                <h2>{{msg}}</h2>
                <test></test>
            </div>
            `,
            data() {
                return {
                    msg: '你好啊',
                };
            },
            components: { test },
        });

        // 创建vm
        const vm = new Vue({
            el: '#root',
            components: { school, hello },
        });
    </script>
</html>
